﻿
<style>
    #tableEditForm .layui-form-label {
        width: 100px;  /* 这里修改标题宽度 */
    }

    #tableEditForm .layui-input-block {
        margin-left: 130px;  /* 这里要比上面始终大30px */
    }
</style>
<form id="tableEditForm" lay-filter="tableEditForm" class="layui-form">
    <input name="tableId" type="hidden"/>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li >信息配置</li>
                    <li class="layui-this">字段管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item" style="margin-bottom: 50px">
                        <div class="layui-card">
                            <div class="layui-card-header">基本信息</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item layui-row">
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label layui-form-required">表名称:</label>
                                        <div class="layui-input-block">
                                            <input name="tableName" placeholder="请输入表名称" class="layui-input"
                                                   lay-verType="tips" lay-verify="required" required/>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label">表描述:</label>
                                        <div class="layui-input-block">
                                            <input name="tableComment" placeholder="请输入表描述" class="layui-input"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label layui-form-required">实体类名:</label>
                                        <div class="layui-input-block">
                                            <input name="className" placeholder="请输入实体类名称" class="layui-input"
                                                   lay-verType="tips" lay-verify="required" required/>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label">备注:</label>
                                        <div class="layui-input-block">
                                            <input name="remark" placeholder="请输入表描述" class="layui-input"/>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="layui-card">
                            <div class="layui-card-header">生成信息</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item layui-row">
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label">生成模板:</label>
                                        <div class="layui-input-block">
                                            <select name="tplCategory">
                                                <option value="singleTable" selected>单表CRUD</option>
                                                <option value="subTable">父子表</option>
                                                <option value="tree">树表</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label layui-form-required">生成模块:</label>
                                        <div class="layui-input-block">
                                            <input name="moduleName" placeholder="请输入仓库名称" class="layui-input"
                                                   lay-verType="tips" lay-verify="required" required/>
                                        </div>
                                    </div>
                                    <div class="layui-inline layui-col-md4">
                                        <label class="layui-form-label">生成业务名:</label>
                                        <div class="layui-input-block">
                                            <input name="businessName" placeholder="请输入" class="layui-input"/>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item layui-show">
                        <!-- 列数据表格 -->
                        <table id="tableColumnTable" lay-filter="tableColumnTable"></table>
                    </div>
                </div>
            </div>
            <div class="layui-form-item text-center">
                <button class="layui-btn" lay-filter="tableEditSubmit" lay-submit>保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </div>
    </div>
</form>
<!-- 表格操作列 -->
<script type="text/html" id="columnCommentTb">
    <div class="ew-tb-cell-input">
        <input name="columns[{{d.LAY_TABLE_INDEX}}].columnComment" value="{{d.columnComment}}" class="layui-input" placeholder="输入名称"/>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="javaFieldTb">
    <div class="ew-tb-cell-input">
        <input name="columns[{{d.LAY_TABLE_INDEX}}].javaField" value="{{d.javaField}}" class="layui-input" placeholder="输入名称"/>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="functionInsertTb">
    <div class="ew-tb-cell-ck">
        <input type="checkbox" name="columns[{{d.LAY_TABLE_INDEX}}].isInsert" lay-skin="primary" value="1" title="" {{d.isInsert=='1'?'checked':''}}/>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="functionEditTb">
    <div class="ew-tb-cell-ck">
        <input type="checkbox" name="columns[{{d.LAY_TABLE_INDEX}}].isEdit" lay-skin="primary" value="1" title="" {{d.isEdit=='1'?'checked':''}}/>
    </div>
</script>
<script type="text/html" id="functionListTb">
    <div class="ew-tb-cell-ck">
        <input type="checkbox" name="columns[{{d.LAY_TABLE_INDEX}}].isList" lay-skin="primary" value="1" title="" {{d.isList=='1'?'checked':''}}/>
    </div>
</script>
<script type="text/html" id="functionQueryTb">
    <div class="ew-tb-cell-ck">
        <input type="checkbox" name="columns[{{d.LAY_TABLE_INDEX}}].isQuery" lay-skin="primary" value="1" title="" {{d.isQuery=='1'?'checked':''}}/>
    </div>
</script>
<script type="text/html" id="functionRequireTb">
    <div class="ew-tb-cell-ck">
        <input type="checkbox" name="columns[{{d.LAY_TABLE_INDEX}}].isRequired" lay-skin="primary" value="1" title="" {{d.isRequired=='1'?'checked':''}}/>
    </div>
</script>
<!-- 表格Java类型选择列 -->
<script type="text/html" id="javaTypeSelect">
    <div class="ew-select-fixed">
        <select lay-filter="javaTypeSelect" name="columns[{{d.LAY_TABLE_INDEX}}].javaTypeSelect">
            <option value="String" {{d.javaType=='String'?'selected':''}}>String</option>
            <option value="Integer" {{d.javaType=='Integer'?'selected':''}}>Integer</option>
            <option value="Long" {{d.javaType=='Long'?'selected':''}}>Long</option>
            <option value="Double" {{d.javaType=='Double'?'selected':''}}>Double</option>
            <option value="BigDecimal" {{d.javaType=='BigDecimal'?'selected':''}}>BigDecimal</option>
            <option value="Date" {{d.javaType=='Date'?'selected':''}}>Date</option>
        </select>
    </div>
</script>
<!-- 表格查询类型选择列 -->
<script type="text/html" id="queryTypeSelect">
    <div class="ew-select-fixed">
        <select lay-filter="queryTypeSelect" name="columns[{{d.LAY_TABLE_INDEX}}].queryTypeSelect">
            <option value="=" {{d.javaType=='='?'selected':''}}>=</option>
            <option value="!=" {{d.javaType=='!='?'selected':''}}>!=</option>
            <option value="like" {{d.javaType=='like'?'selected':''}}>like</option>
        </select>
    </div>
</script>
<!-- 表格显示类型选择列 -->
<script type="text/html" id="htmlTypeSelect">
    <div class="ew-select-fixed">
        <select lay-filter="htmlTypeSelect" name="columns[{{d.LAY_TABLE_INDEX}}].htmlTypeSelect">
            <option value="input" {{d.htmlType=='input'?'selected':''}}>输入框</option>
            <option value="textarea" {{d.htmlType=='textarea'?'selected':''}}>文本域</option>
            <option value="select" {{d.htmlType=='select'?'selected':''}}>选择框</option>
            <option value="radio" {{d.htmlType=='radio'?'selected':''}}>单选框</option>
            <option value="checkbox" {{d.htmlType=='checkbox'?'selected':''}}>复选框</option>
            <option value="datetime" {{d.htmlType=='datetime'?'selected':''}}>日期控件</option>
            <option value="upload" {{d.htmlType=='upload'?'selected':''}}>上传组件</option>
        </select>
    </div>
</script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','table'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        //…

    });
</script>
